<template>
  <!-- 社会责任 -->
  <div class="duty">
    <div v-for="(item, index) in list" :key="index">
      <div v-if="index % 2 != 0" class="duty_item ">
        <el-image class="img" :src="item.image" fit="cover" lazy></el-image>
        <div class="content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
      <div v-else class="duty_item ">
        <div class="content2">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
        <el-image class="img" :src="item.image" fit="cover" lazy></el-image>
      </div>
    </div>
    <el-pagination
      class="page"
      :page-size="8"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
    ></el-pagination>
  </div>
</template>
<script>
import { responsibility_list } from "@/api/about.js";
export default {
  name: "duty",
  data() {
    return {
      list: [],
      count: 0
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    pageSize(e) {
      this.getList(e);
    },
    getList(page) {
      responsibility_list({ page, size: 8 }).then(res => {
       this.list = res.data.data;
        this.count = res.data.count;
      });
    }
  }
};
</script>
<style scoped src="./sass/aboutUs.css"></style>
